<template>
	<view>
		<view class="tabWrap">
			<view class="tabList">
				<text class="tabList_item"
					:class="{'active':swiperIndex === index}"
					v-for="(item,index) in tabList"
					:key="index"
					@click="clickTab(item.type,index)">{{item.name}}</text>
			</view>
			<text class="line"></text>
			<view class="screen">
				<text :class="{'active':sort==='created'}" @click="clickScreen(1)">新品</text>
				<text :class="{'active':sort==='buy'}" @click="clickScreen(2)">热门</text>
			</view>
		</view>
		<view class="tabPlaceholder" v-if="isFixed" style="height: 80rpx;"></view>
	</view>

</template>

<script>
	export default {
		props:{
			isFixed:{
				type:Boolean,
				default:false
			},
			tabCeilingTop:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				tabList:[
					{
						name:'全部商品',
						type:'all'
					},
					{
						name:'PS作品',
						type:'ps'
					},
					{
						name:'VI作品',
						type:'vi'
					},
					{
						name:'其它',
						type:'other'
					}
				],
				type:'all',
				sort:'created',
				swiperIndex:0
			}
		},
		mounted(){
			uni.$on('giveShopSwiperIndex',this.getSwiperIndex)
		},
		beforeDestroy(){
			uni.$off('giveShopSwiperIndex',this.getSwiperIndex)
		},
		methods:{
			getSwiperIndex(index){
				this.swiperIndex = index
			},
			clickTab(type,index){
				uni.$emit('giveShopTab',{type,index})
			},
			clickScreen(val){
				switch(val){
					case 1:
						this.sort = 'created'
						break
					case 2:
						this.sort = 'buy'
						break
				}
				uni.$emit('giveShopSort',this.sort)
			}
		}
	}
</script>

<style lang="scss" scoped>
.active{
	color: rgb(31, 182, 131);
	font-weight: bold;
}
.tabWrap{
	width: 750rpx;
	height: 80rpx;
	padding: 0 20rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: rgb(119, 119, 119);
	border-bottom: 1rpx solid rgba(31, 182, 131, 0.2);
	font-size: 28rpx;
	background-color: #fff;
	.tabList{
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding-right:20rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}
	.line{
		width:1rpx;
		height:40rpx;
		background-color:$u-success;
	}
	.screen{
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		padding-left: 20rpx;
		flex-direction: row;
		justify-content: space-between;
	}
}
</style>
